<template>
    <div class="repository-list">
      <div class="repository-header">
        <div class="header-left">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="我参与的" name="participated">
              <span slot="label">我参与的 {{ participatedCount }}</span>
            </el-tab-pane>
            <el-tab-pane label="全部" name="all">
              <span slot="label">全部 {{ totalCount }}</span>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="header-right">
          <el-input
            placeholder="搜索代码库"
            prefix-icon="el-icon-search"
            v-model="searchQuery"
            class="search-input"
          >
          </el-input>
          <el-dropdown trigger="click" class="filter-dropdown">
            <el-button plain>
              筛选<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>最近更新</el-dropdown-item>
              <el-dropdown-item>最早创建</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" @click="$router.push('/admin/repository/create')">
            导入代码库
          </el-button>
          <el-button type="primary" @click="$router.push('/admin/repository/create')">
            新建代码库
          </el-button>
        </div>
      </div>
  
      <div class="repository-list-content">
        <div v-for="repo in repositories" :key="repo.id" class="repository-item">
          <div class="repo-header">
            <div class="repo-name">
              <span class="visibility-icon" :class="repo.visibility">
                <i :class="repo.visibility === 'private' ? 'el-icon-lock' : 'el-icon-view'"></i>
              </span>
              <router-link :to="`/admin/repository/${repo.id}`">
                {{ repo.name }}
              </router-link>
            </div>
            <el-button-group>
              <el-button size="mini" icon="el-icon-star-off">{{ repo.stars || 0 }}</el-button>
              <el-button size="mini" icon="el-icon-share">{{ repo.forks || 0 }}</el-button>
            </el-button-group>
          </div>
          <div class="repo-desc">{{ repo.description || '暂无描述' }}</div>
          <div class="repo-footer">
            <span class="update-time">更新于 {{ formatTime(repo.updated_at) }}</span>
          </div>
        </div>
      </div>
  
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'RepositoryList',
    data() {
      return {
        activeTab: 'participated',
        searchQuery: '',
        repositories: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        participatedCount: 5,
        totalCount: 7
      }
    },
    created() {
      this.fetchRepositories()
    },
    methods: {
      async fetchRepositories() {
        try {
          const response = await this.$http.get('/api/repositories', {
            params: {
              page: this.currentPage,
              size: this.pageSize,
              type: this.activeTab,
              query: this.searchQuery
            }
          })
          const { data } = response
          if (data.code === 200) {
            this.repositories = data.data.items
            this.total = data.data.total
          }
        } catch (error) {
          this.$message.error('获取仓库列表失败')
        }
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.fetchRepositories()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchRepositories()
      },
      formatTime(time) {
        // 这里可以使用 moment.js 或 dayjs 来格式化时间
        return new Date(time).toLocaleDateString()
      }
    },
    watch: {
      activeTab() {
        this.fetchRepositories()
      },
      searchQuery: {
        handler: function() {
          this.fetchRepositories()
        },
        debounce: 300
      }
    }
  }
  </script>
  
  <style  scoped>
  .repository-list {
    padding: 20px;
    background: #fff;
  
    .repository-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
  
      .header-left {
        .el-tabs {
          margin-bottom: -20px;
        }
      }
  
      .header-right {
        display: flex;
        gap: 10px;
        align-items: center;
  
        .search-input {
          width: 200px;
        }
      }
    }
  
    .repository-list-content {
      margin-top: 20px;
    }
  
    .repository-item {
      padding: 20px;
      border-bottom: 1px solid #e8e8e8;
  
      &:last-child {
        border-bottom: none;
      }
  
      .repo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
  
        .repo-name {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 16px;
  
          .visibility-icon {
            &.private {
              color: #f56c6c;
            }
            &.public {
              color: #67c23a;
            }
          }
  
          a {
            color: #0366d6;
            text-decoration: none;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
  
      .repo-desc {
        color: #666;
        margin-bottom: 8px;
        font-size: 14px;
      }
  
      .repo-footer {
        color: #999;
        font-size: 12px;
      }
    }
  
    .pagination-container {
      margin-top: 20px;
      text-align: right;
    }
  }
  </style>